@import "tailwindcss";

@plugin 'tailwindcss-animate';

@custom-variant dark (&:is(.dark *));

@utility container {
  margin-inline: auto;
  padding-inline: 2rem;
  @media (width >= --theme(--breakpoint-sm)) {
    max-width: none;
  }
  @media (width >= 1400px) {
    max-width: 1400px;
  }
}

@theme {
  --color-muted-foreground: 215.4 16.3% 46.9%;

  --color-colors-background: var(--background);
  --color-colors-foreground: var(--foreground);

  --color-colors-card: var(--card);
  --color-colors-card-foreground: var(--card-foreground);

  --color-colors-popover: var(--popover);
  --color-colors-popover-foreground: var(--popover-foreground);

  --color-colors-primary: var(--primary);
  --color-colors-primary-foreground: var(--primary-foreground);

  --color-colors-secondary: var(--secondary);
  --color-colors-secondary-foreground: var(--secondary-foreground);

  --color-colors-muted: var(--muted);
  --color-colors-muted-foreground: var(--muted-foreground);

  --color-colors-accent: var(--accent);
  --color-colors-accent-foreground: var(--accent-foreground);

  --color-colors-destructive: var(--destructive);
  --color-colors-destructive-foreground: var(--destructive-foreground);

  --color-colors-border: var(--border);
  --color-colors-input: var(--input);
  --color-colors-ring: var(--ring);

  --color-colors-chart-1: var(--chart-1);
  --color-colors-chart-2: var(--chart-2);
  --color-colors-chart-3: var(--chart-3);
  --color-colors-chart-4: var(--chart-4);
  --color-colors-chart-5: var(--chart-5);

  --color-muted-foreground: var(--color-gray-500);

  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;

  @keyframes accordion-down {
    from {
      height: 0;
    }
    to {
      height: var(--radix-accordion-content-height);
    }
  }
  @keyframes accordion-up {
    from {
      height: var(--radix-accordion-content-height);
    }
    to {
      height: 0;
    }
  }
}

/*
  The default border color has changed to `currentcolor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentcolor);
  }
}

@layer utilities {
  .input-focus {
    transition: box-shadow 0.15s ease-in-out;
  }

  .input-focus:focus {
    box-shadow: none;
  }

  /* Include Geist font */
  @font-face {
    font-family: "Geist";
    src: url("/src/assets/fonts/Geist-Black.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
  }

  @font-face {
    font-family: "Geist";
    src: url("/src/assets/fonts/Geist-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
  }

  @font-face {
    font-family: "Geist";
    src: url("/src/assets/fonts/Geist-ExtraBold.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
  }

  @font-face {
    font-family: "Geist";
    src: url("/src/assets/fonts/Geist-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
  }

  @font-face {
    font-family: "Geist";
    src: url("/src/assets/fonts/Geist-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
  }

  @font-face {
    font-family: "Geist";
    src: url("/src/assets/fonts/Geist-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
  }

  @font-face {
    font-family: "Geist";
    src: url("/src/assets/fonts/Geist-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
  }

  @font-face {
    font-family: "Geist";
    src: url("/src/assets/fonts/Geist-Thin.woff2") format("woff2");
    font-weight: 100;
    font-style: normal;
  }

  @font-face {
    font-family: "Geist";
    src: url("/src/assets/fonts/Geist[wght].woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
  }

  @font-face {
    font-family: "Geist-Mono";
    src: url("/src/assets/fonts/GeistMono[wght].woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
  }

  @font-face {
    font-family: "Geist-Mono";
    src: url("/src/assets/fonts/GeistMono-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
  }

  @font-face {
    font-family: "Geist-Mono";
    src: url("/src/assets/fonts/GeistMono-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
  }

  @font-face {
    font-family: "Geist-Mono";
    src: url("/src/assets/fonts/GeistMono-SemiBold.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
  }

  body {
    font-family: "Geist", sans-serif;
  }

  /* Typography based on: https://github.com/shadcn-ui/ui/discussions/1527#discussioncomment-9396350 */
}
@layer base {
  h1,
  .h1 {
    @apply scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl;
  }

  h2,
  .h2 {
    @apply scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0;
  }

  h3,
  .h3 {
    @apply scroll-m-20 text-2xl font-semibold tracking-tight;
  }

  h4,
  .h4 {
    @apply scroll-m-20 text-xl font-semibold tracking-tight;
  }

  p {
    @apply leading-7;
  }

  blockquote {
    @apply mt-6 border-l-2 pl-6 italic;
  }

  .lead {
    @apply text-xl text-muted-foreground;
  }

  .large {
    @apply text-lg font-semibold;
  }

  .small {
    @apply text-sm font-medium leading-none;
  }

  .muted {
    @apply text-sm text-muted-foreground;
  }

  .link {
    @apply font-medium underline underline-offset-4;
  }

  ul {
    @apply my-6 ml-6 list-disc [&>li]:mt-2;
  }

  .inline-code {
    @apply relative rounded-sm bg-slate-400 px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold;
  }

  .table-container {
    @apply my-6 w-full overflow-y-auto;
  }

  table {
    @apply w-full;
  }

  th {
    @apply border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right;
  }

  td {
    @apply border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right;
  }

  tbody tr {
    @apply m-0 border-t p-0 even:bg-slate-400;
  }

  span {
    @apply cursor-default;
  }
}

@layer base {
  :root {
    --background: hsl(0 0% 100%);
    --foreground: hsl(240 10% 3.9%);
    --card: hsl(0 0% 100%);
    --card-foreground: hsl(240 10% 3.9%);
    --popover: hsl(0 0% 100%);
    --popover-foreground: hsl(240 10% 3.9%);
    --primary: hsl(240 5.9% 10%);
    --primary-foreground: hsl(0 0% 98%);
    --secondary: hsl(240 4.8% 95.9%);
    --secondary-foreground: hsl(240 5.9% 10%);
    --muted: hsl(240 4.8% 95.9%);
    --muted-foreground: hsl(240 3.8% 46.1%);
    --accent: hsl(240 4.8% 95.9%);
    --accent-foreground: hsl(240 5.9% 10%);
    --destructive: hsl(0 84.2% 60.2%);
    --destructive-foreground: hsl(0 0% 98%);
    --border: hsl(240 5.9% 90%);
    --input: hsl(240 5.9% 90%);
    --ring: hsl(240 5.9% 10%);
    --radius: 0.5rem;
    --chart-1: hsl(12 76% 61%);
    --chart-2: hsl(173 58% 39%);
    --chart-3: hsl(197 37% 24%);
    --chart-4: hsl(43 74% 66%);
    --chart-5: hsl(27 87% 67%);
    --sidebar-background: hsl(0 0% 98%);
    --sidebar-foreground: hsl(240 5.3% 26.1%);
    --sidebar-primary: hsl(240 5.9% 10%);
    --sidebar-primary-foreground: hsl(0 0% 98%);
    --sidebar-accent: hsl(240 4.8% 95.9%);
    --sidebar-accent-foreground: hsl(240 5.9% 10%);
    --sidebar-border: hsl(220 13% 91%);
    --sidebar-ring: hsl(217.2 91.2% 59.8%);
  }

  .dark {
    color: white; /* Default text color */
    --background: hsl(240 10% 3.9%);
    --foreground: hsl(0 0% 98%);
    --card: hsl(240 10% 3.9%);
    --card-foreground: hsl(0 0% 98%);
    --popover: hsl(240 10% 3.9%);
    --popover-foreground: hsl(0 0% 98%);
    --primary: hsl(0 0% 98%);
    --primary-foreground: hsl(240 5.9% 10%);
    --secondary: hsl(240 3.7% 15.9%);
    --secondary-foreground: hsl(0 0% 98%);
    --muted: hsl(240 3.7% 15.9%);
    --muted-foreground: hsl(240 5% 64.9%);
    --accent: hsl(240 3.7% 15.9%);
    --accent-foreground: hsl(0 0% 98%);
    --destructive: hsl(0 62.8% 30.6%);
    --destructive-foreground: hsl(0 0% 98%);
    --border: hsl(240 3.7% 15.9%);
    --input: hsl(240 3.7% 15.9%);
    --ring: hsl(240 4.9% 83.9%);
    --chart-1: hsl(220 70% 50%);
    --chart-2: hsl(160 60% 45%);
    --chart-3: hsl(30 80% 55%);
    --chart-4: hsl(280 65% 60%);
    --chart-5: hsl(340 75% 55%);
    --sidebar-background: hsl(240 5.9% 10%);
    --sidebar-foreground: hsl(240 4.8% 95.9%);
    --sidebar-primary: hsl(224.3 76.3% 48%);
    --sidebar-primary-foreground: hsl(0 0% 100%);
    --sidebar-accent: hsl(240 3.7% 15.9%);
    --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
    --sidebar-border: hsl(240 3.7% 15.9%);
    --sidebar-ring: hsl(217.2 91.2% 59.8%);
  }
}

body {
  margin: 0;
}

:root {
  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

.main-app {
  overflow: hidden;
  height: calc(500px - 12px); /* The top arrow half height */
  border-radius: 8px;
  background-color: white;
  display: flex;
  flex-direction: column;
}

.arrow {
  position: relative;
  padding: 12px 0 !important;
  overflow: hidden;
  background-image: url(assets/arrow.svg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 28px 14px;
}

.arrow_bottom {
  position: relative;
  overflow: hidden;
}

.container {
  padding: 0;
  overflow: hidden;
  flex: 1;
  display: flex;
  margin: 0;
  background-color: transparent;
  position: relative;
}

.screenshare-body {
  overflow: hidden;
  background-color: var(--color-slate-900);
}

.screenshare-video-focus,
.screenshare-video:focus {
  outline: 3px solid var(--color-yellow-300);
  outline-offset: -2px;
}

.btn-gradient-white {
  background: linear-gradient(
    197.13deg,
    #ffffff 12.41%,
    #fdfdfd 51.89%,
    #fafafa 82.28%,
    #f7f7f7 105.06%,
    #f4f4f4 121.71%,
    #f0f0f0 133.74%,
    #ececec 142.61%,
    #e8e8e8 149.83%,
    #e4e4e4 156.89%,
    #e0dfdf 165.26%,
    #dcdbdb 176.44%,
    #d7d7d7 191.91%,
    #d3d3d3 213.17%,
    #d0cfcf 241.7%,
    #cccbcb 278.99%,
    #c9c8c8 326.53%
  );
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.07);
  border-radius: 8px;
}

.logo-hover {
  cursor: url(assets/cursor.png), auto;
}

@keyframes oscillate {
  0% {
    transform: rotate(-4deg);
  }
  25% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(4deg);
  }
  75% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-4deg);
  }
}

.animate-oscillate {
  animation: oscillate 0.5s ease-in-out infinite;
}

@keyframes click-ripple-effect {
  0% {
    opacity: 1;
    transform: scale(0.8);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.2);
  }
  100% {
    opacity: 0;
    transform: scale(1.6);
  }
}

.click-ripple {
  position: fixed;
  width: 10px;
  height: 10px;
  background-color: transparent;
  border-radius: 50%;
  border: 2px solid #3b82f6;
  pointer-events: none;
}

/* Hack to make this feel native app */
* {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -o-user-select: none;
  user-select: none;
  cursor: default;
}

button {
  cursor: default;
}

/* Windows Customisations */
.windows {
  &#root {
    border: 2px solid var(--color-slate-200);
    /* Hack to make border visible on the right side */
    width: calc(100% - 1px);
  }

  .scrollarea {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

.main-app.windows {
  height: 500px;
}

.camera-body {
  overflow: hidden;
}
